<template>
  <Layout class="p-5 bg-white">
    <Form
      class="p-5"
      :model="baomingInfo.student"
      :rules="ruleValidate"
      :label-width="155"
    >
      <Row>
        <Col span="8" push="2">
          <FormItem class="w-100" label="姓名" prop="name">
            <Input v-model="baomingInfo.student.name"></Input>
          </FormItem>
          <FormItem class="w-100" label="手机号" prop="tel">
            <Input v-model="baomingInfo.student.tel"></Input>
          </FormItem>
          <FormItem class="w-100" label="报名时间">
            <Date-picker
              format="yyyy-MM-dd HH:mm:ss"
              :value="baomingInfo.baoming.dateTime"
              class="w-100"
              type="datetime"
              @on-change="tryTime"
              placeholder="报名时间"
            >
            </Date-picker>
          </FormItem>
          <FormItem class="w-100" label="线索状态">
            <Input v-model="baomingInfo.resource.statu"></Input>
          </FormItem>
          <FormItem class="w-100" label="线索来源">
            <Select v-model="baomingInfo.resource.source" filterable clearable>
              <Option v-for="item in orsourceList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem class="w-100" label="应聘职位">
            <Input v-model="baomingInfo.resource.ypzw"></Input>
          </FormItem>
          <FormItem class="w-100" label="从事过的工作">
            <Input v-model="baomingInfo.resource.csgz"></Input>
          </FormItem>
          <FormItem class="w-100" label="投递公司名称">
            <Input v-model="baomingInfo.resource.tdgsmc"></Input>
          </FormItem>
          <FormItem class="w-100" label="身份证ID">
            <Input v-model="baomingInfo.student.secId"></Input>
          </FormItem>
          <FormItem class="w-100" label="身份证正面">
            <div v-if="baomingInfo.student.secFrontUrl != ''">
              <img
                :src="baomingInfo.student.secFrontUrl"
                style="width:180px;height:120px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemove"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              :show-upload-list="false"
              name="file"
              ref="upload"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>
          <FormItem class="w-100" label="身份证反面">
            <!-- 身份证反面-->
            <div v-if="baomingInfo.student.secBackUrl != ''">
              <img
                :src="baomingInfo.student.secBackUrl"
                style="width:180px;height:120px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemoveBack"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              :show-upload-list="false"
              name="file"
              ref="back"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccessBack"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>
        </Col>
        <Col span="8" push="3">
          <FormItem class="w-100" label="银行账户">
            <Input v-model="baomingInfo.student.account"></Input>
          </FormItem>
          <FormItem class="w-100" label="银行预留电话">
            <Input v-model="baomingInfo.student.accountTel"></Input>
          </FormItem>
          <FormItem class="w-100" label="联系地址">
            <Input v-model="baomingInfo.student.address"></Input>
          </FormItem>
          <FormItem class="w-100" label="邮件">
            <Input v-model="baomingInfo.student.email"></Input>
          </FormItem>
          <FormItem class="w-100" label="学历">
            <Input v-model="baomingInfo.student.degree"></Input>
          </FormItem>
          <FormItem class="w-100" label="专业">
            <Input v-model="baomingInfo.student.major"></Input>
          </FormItem>
          <FormItem class="w-100" label="毕业院校">
            <Input v-model="baomingInfo.student.graduate"></Input>
          </FormItem>
          <FormItem class="w-100" label="生日">
            <Date-picker
              format="yyyy-MM-dd HH:mm:ss"
              class="w-100"
              type="datetime"
              :value="baomingInfo.student.birth"
              @on-change="birth"
              placeholder="生日"
            >
            </Date-picker>
          </FormItem>
          <FormItem class="w-100" label="毕业时间">
            <Date-picker
              format="yyyy-MM-dd HH:mm:ss"
              :value="baomingInfo.student.graduateTime"
              class="w-100"
              type="datetime"
              @on-change="graduateTime"
              placeholder="毕业时间"
            >
            </Date-picker>
          </FormItem>
          <FormItem class="w-100" label="资料备注">
            <Input v-model="baomingInfo.resourceRecord.comment"></Input>
          </FormItem>
          <FormItem class="w-100" label="上传的文件或图片路径">
            <Input v-model="baomingInfo.resourceRecord.content"></Input>
          </FormItem>
          <FormItem class="w-100" label="身份证手持">
            <!-- 手持身份证-->
            <div v-if="baomingInfo.student.secHandleUrl != ''">
              <img
                :src="baomingInfo.student.secHandleUrl"
                style="width:180px;height:120px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemoveHand"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              :show-upload-list="false"
              name="file"
              ref="hand"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccessHand"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>
          <FormItem>
            <Button @click="submit" type="primary">提交</Button>
            <Button @click="cancel" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      url: '',
      iport: '',
      isSpinShow: false,
      uploadListFront: [], //身份证正面
      uploadlistBack: [], //身份证反面
      uploadHand: [], //手持身份证

      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        tel: [
          {
            required: true,
            message: '电话号码不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
      },
      baomingInfo: {
        baoming: {
          id: 18,
          dateTime: '2021-05-31 16:00:00',
          autor: 1,
        },
        resourceRecord: {
          id: 13,
          comment: '123',
          content: '',
        },
        resource: {
          id: 15,
          source: 'java',
          statu: '未报名',
          ypzw: 'Java',
          csgz: '黑盒测试',
          tdgsmc: '投递公司名称',
          bz: '备注',
          cu: '',
          ct: '2021-07-01T11:53:24',
        },
        student: {
          id: 18,
          name: '',
          secId: '身份证ID',
          secFrontUrl: '',
          secBackUrl: '',
          secHandleUrl: '',
          tel: '联系电话',
          account: '银行账户',
          accountTel: '银行预留电话',
          address: '联系地址',
          degree: '学历',
          major: '专业',
          graduate: '毕业院校',
          birth: '2021-07-07 10:04:05',
          graduateTime: '2021-07-07 10:04:05',
          email: '邮件',
        },
        reservationBackview: {
          id: 6,
          datetime: '2021-05-31 16:01:00',
        },
      },
      orsourceList: [
        { value: '58同城', label: '58同城' },
        { value: '智联招聘', label: '智联招聘' },
        { value: '前程无忧', label: '前程无忧' },
        { value: 'boss直聘', label: 'boss直聘' },
        { value: '拉勾网', label: '拉勾网' },
        { value: '51job', label: '51job' },
        { value: '其他', label: '其他' },
      ],
      baomingId: '',
      isReservationBackview: false,
    }
  },
  methods: {
    //图片上传时文件格式错误方法
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' +
          file.name +
          ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
      })
    },
    //校验图片的大小，不能大于2M
    handleMaxSize: function(file) {
      this.$Modal.info({
        title: '超出文件大小限制',
        content: '文件 ' + file.name + ' 太大，不能超过 2M。',
      })
    },
    handleRemove(file) {
      // 从 upload 实例删除数据 正面
      this.baomingInfo.student.secFrontUrl = ''
    },
    handleRemoveBack(file) {
      // 从 upload 实例删除数据 反面
      this.baomingInfo.student.secBackUrl = ''
    },
    handleRemoveHand(file) {
      // 从 upload 实例删除数据 手持
      this.baomingInfo.student.secHandleUrl = ''
    },
    //上传成功后的勾子 正面
    handleSuccess: function(response, file, fileList) {
      this.baomingInfo.student.secFrontUrl = response.DATA.URL
    },

    handleSuccessBack: function(response, file, fileList) {
      this.baomingInfo.student.secBackUrl = response.DATA.URL
    },

    handleSuccessHand: function(response, file, fileList) {
      this.baomingInfo.student.secHandleUrl = response.DATA.URL
    },

    birth(change) {
      this.baomingInfo.student.birth = change
    },
    graduateTime(change) {
      this.baomingInfo.student.graduateTime = change
    },
    reservationBackviewTime(change) {
      this.baomingInfo.reservationBackview.datetime = change
    },
    tryTime(change) {
      this.baomingInfo.baoming.dateTime = change
    },
    cancel: function() {
      this.$tabs.close({ to: '/try' })
    },
    submit: function() {
      if (this.$data.baomingInfo.student.name.trim().length === 0) {
        this.message.error('账户名必须输入')
        return
      }
      if (this.$data.baomingInfo.student.name.indexOf(' ') > -1) {
        this.message.error('账户名中不能有空格')
        return
      }
      if (this.$data.baomingInfo.student.tel.trim().length === 0) {
        this.message.error('电话号必须输入')
        return
      }
      if (this.$data.baomingInfo.student.tel.indexOf(' ') > -1) {
        this.message.error('电话号码中不能有空格')
        return
      }
      let self = this
      this.isSpinShow = true
      this.http
        .put({
          url: '/baoming',
          param: { baomingStr: self.baomingInfo },
        })
        .then((data) => {
          this.isSpinShow = false
          self.message.info('修改成功')
          this.$tabs.close({ to: '/baoming' })
        })
    },
    init: function() {
      this.searchBaoming()
    },
    searchBaoming: function() {
      let self = this
      this.http
        .get({
          url: `/baoming/info/${this.$data.baomingId}`,
        })
        .then((data) => {
          self.baomingInfo = data
        })
    },
  },

  created: function() {
    this.iport = this.$store.state.iport
    this.url = this.iport + 'oss/file/upload'
  },
  mounted: function() {
    this.$data.baomingId = this.$route.params.row.baomingId
    this.init()
  },
  destroyed: function() {
    this.$router.push({
      name: 'baoming',
    })
  },
}
</script>
<style scoped></style>
